<template>
  <div class="list">
    <ul class="top">
      <li>全部(4)</li>
      <li>降价(0)</li>
      <li>常卖(4)</li>
      <li>
        <van-dropdown-menu style="width:50px;">
          <van-dropdown-item v-model="value1" :options="option1" />
        </van-dropdown-menu>
      </li>
    </ul>
    <div class="w-cart">
      <div class="panel panel-info">
        <div class="panel-body">
          <div class="w-checkbox">
            <label>
              <input type="checkbox" v-model="checkAll" />
              全选
            </label>
          </div>
          <ul class="list-group">
            <li class="list-group-item" v-for="item in list" :key="item.id">
              <div class="w-checkbox">
                <label>
                  <ul class="w-goods">
                    <li class="w-left">
                      <input type="checkbox" v-model="item.checked" />
                      <img src="../../public/imgs/iphone SE2.png" alt="" />
                    </li>
                    <li>
                      <p>{{ item.name }}</p>

                      <div class="w-btn">
                        <div style="color:red">{{ "￥" + item.price }}</div>
                        <div>
                          <button
                          type="button"
                          @click="item.quantity > 1 ? (item.quantity -= 1) : 1"
                          class="btn btn-success"
                        >
                          -
                        </button>
                        {{ item.quantity }}
                        <button
                          type="button"
                          @click="item.quantity += 1"
                          class="btn btn-success"
                        >
                          +
                        </button>
                        </div>
                      </div>
                    </li>
                  </ul>
                </label>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- <div class="goods">
      <div class="left">
        <input type="checkbox" />
        <img src="../../public/imgs/iphone SE2.png" alt="" />
      </div>
      <div class="right">
        <p>
          华为 HUAWEI P40 Pro 麒麟990 5G SoC芯片 5000万超感知徕卡四摄
          50倍数字变焦
        </p>
        <ul>
          <li>
            <span>￥ 6488</span>
            <van-stepper v-model="value2" />
          </li>
        </ul>
      </div>
    </div> -->
    <div class="recom">
      <i class="fa fa-heart" aria-hidden="true"></i> <span>为你推荐</span>
    </div>
    <ul class="LR">
      <li>
        <img
          src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
          alt=""
        />
        <p><span>京东物流</span>Apple 2020款 MacBook Pro 13.3</p>
        <div>
          <span>￥ 8999</span>
          <p>看相似</p>
        </div>
      </li>
      <li>
        <img
          src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
          alt=""
        />
        <p><span>京东物流</span>Apple 2020款 MacBook Pro 13.3</p>
        <div>
          <span>￥ 8999</span>
          <p>看相似</p>
        </div>
      </li>
    </ul>
    <div class="blank"></div>
    <ul class="bottom">
      <li class="price">
        <input type="checkbox" v-model="checkAll" />
        合计：￥{{ sumPrice }}
      </li>
      <li class="sum">
        <van-goods-action-button type="danger" text=" 去结算" />
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      value1: 0,
      value2: 1,
      option1: [
        { text: "分类", value: 0 },
        { text: "手机", value: 1 },
        { text: "电脑", value: 2 },
      ],
      activeKey: 0,
      list: [
        {
          id: 1,
          name:
            "华为 HUAWEI P40 Pro 麒麟990 5G SoC芯片 5000万超感知徕卡四摄50倍数字变焦",
          price: 3999,
          checked: false,
          quantity: 1,
        },
        {
          id: 2,
          name: "华为 HUAWEI Mate 30 Pro 5G 麒麟990",
          price: 5488,
          checked: false,
          quantity: 1,
        }
      ],
    };
  },
  onChange(index) {
    Notify({ type: "primary", message: index });
  },
  computed: {
    checkAll: {
      //设置值，当点击全选按钮的时候触发
      set(v) {
        this.list.forEach((item) => (item.checked = v));
      },
      //取值，当列表中的值改变之后触发，需要return
      get() {
        return (
          this.list.length === this.list.filter((item) => item.checked).length
        );
      },
    },
    //计算总价，选择被选中的元素
    sumPrice() {
      return this.list
        .filter((item) => item.checked)
        .reduce((pre, cur) => {
          return pre + cur.price * cur.quantity;
        }, 0);
    },
  },
  methods: {
    save() {
      console.log(this.list.filter((item) => item.checked));
    },
  },
  // created() {
  //   axios.get("http://localhost:3009/api/v1/products").then((res) => {
  //     console.log(res.data);
  //     this.list = res.data.products;
  //   });
  // }
};
</script>

<style>
.top {
  height: 60px;
  align-items: center;
  display: flex;
  justify-content: space-around;
}
.top .van-dropdown-menu__bar {
  box-shadow: none;
}
.w-checkbox {
  padding-left: 10px;
}
.w-checkbox img {
  width: 110px;
}
.w-goods {
  display: flex;
  justify-content: space-between;
  margin: 0 20px;
  height: 120px;
  align-items: center;
}
.w-left {
  display: flex;
  align-items: center;
}
.w-btn{
  display: flex;
  justify-content: space-between;
}
.van-button {
  padding: 20px;
  font-size: 18px;
}
.btn-success {
  width: 22px;
}
.goods {
  display: flex;
  align-items: center;
  border-bottom: 1px rgb(240, 237, 237) solid;
}
.left {
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.right p {
  font-size: 14px;
  line-height: 26px;
  margin-bottom: 10px;
}
.right li {
  display: flex;
  justify-content: space-around;
}
.right li span {
  color: red;
  font-weight: bold;
  margin-top: 5px;
}
.recom {
  height: 30px;
  line-height: 30px;
  background: rgb(250, 248, 248);
}
.recom i {
  color: red;
}
.blank {
  height: 30px;
  background-color: rgb(250, 248, 248);
}
.bottom {
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  margin: 0 15px 0 15px;
}
.bottom .price {
  display: flex;
  height: 100%;
  width: 136px;
  align-items: center;
  justify-content: space-around;
  font-size: 18px;
}
.price p {
  margin-left: 10px;
}
</style>
